<template>
    <div class="fixed"
        @mousedown.stop
        @click.stop
    >
        <div class="audio">
            <audio src="" ref="audioElement"></audio>
        </div>
        <div class="container">
            <Play ref="playRef"></Play>

            <Progress 
                ref="progressRef" 
                :picUrl="pic"
            >
            </Progress>

            <OtherFunVue
                :audio="audioElement"
                :id="songId"
                ref="otherFunVueRef"
            ></OtherFunVue>
        </div>
    </div>
</template>

<script setup>
    // 组件
    import Play from './Play.vue'
    import Progress from './Progress.vue';
    import OtherFunVue from './otherFun/OtherFun.vue';
    import { getCurrentInstance, ref, inject } from 'vue';
    const axios = getCurrentInstance().proxy.$http;
    const emitter = inject('emitter');

    // 获取音乐id
    let pic = ref();
    let songId = ref();
    emitter.on('play', async id => {
        songId.value = id;
        let { data } = await axios.get(`/song/detail?ids=${id}`);
        data = data.songs[0];
        stringConnect(data.name, data.ar);  //title 歌名 歌手
        emitter.emit('songInformation', {songName: data.name , singer: data.ar})
        pic.value = data.al.picUrl;
        const res = await axios({ url: `/song/url?id=${id}` });
        updateAudioSrc(res.data.data[0].url); 
        emitter.emit('lyricInt');
    })


    // 处理title上的歌名以及歌手名称
    const stringConnect = (name, singer) => {
        name += '-';
        singer.forEach((value, index) => {
            if (index === 0) {
                name += value.name;
            } else {
                name += `/${value.name}`;
            }
        })
        document.title = name;
    }

    // 创建audio标签
    let audioElement = ref();
    const updateAudioSrc = (url) => {
        audioElement.value.src = url;
        audioElement.value.addEventListener('loadeddata', () => {
            emitter.emit('time', audioElement.value);
            emitter.emit('getAudio', audioElement.value);
            // 控制音量
            audioElement.value.volume = otherFunVueRef.value.currentVolume;
            // 一开始让进度条的宽度是0
            emitter.emit('initWidth');
            // 一开始就播放
            audioElement.value.play();
            playRef.value.playState = 'stop';
        })
        // 播放完成之后执行的事件
        audioElement.value.addEventListener('ended', () => { 
            emitter.emit('getNextSongId')
        })

    }
    

    // 获取play组件的数据
    let playRef = ref();

    // 获取OtherFunVue组件的数据
    let otherFunVueRef = ref();

</script>

<style lang='less' scoped>
.fixed {
    user-select: none;
    position: fixed;
    bottom: 0px;
    z-index: 10;
    height: 50px;
    background: rgba(10, 10, 10, 0.9);
    width: 100%;
    .audio {
        visibility: hidden;
        position: absolute;
        width: 300px;
        height: 50px;
        border: 1px solid red;
        top: -50px;
        audio {
            width: 100%;
            height: 100%;
        }
    }
    .container {
        width: 980px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
